<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>叠加矢量瓦片图层(以水质监测站为例)</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css" />

    <!--<link rel="stylesheet" href="./css/ol.css" type="text/css" />-->
    <link rel="stylesheet" href="./v6.4.3-dist/ol.css" type="text/css" />

    <link rel="stylesheet" href="./css/ktol3.css" type="text/css" />
    <link rel="stylesheet" href="./css/mapPop.css" type="text/css" />
    <link href="./css/widgets.css" rel="stylesheet" />
    <link href="./css/pretty.css" rel="stylesheet" />

    <script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
    <!--<script type="text/javascript" src="./js/ol-debug.js"></script>-->
    <!--<script type="text/javascript" src="./js/ol.js"></script>-->
    <script type="text/javascript" src="./v6.4.3-dist/ol.js"></script>

    <script type="text/javascript" src="./js/iclient-ol-es6.js"></script>
    <script type="text/javascript" src="./js/olms.js"></script>
    <script type="text/javascript" src="./js/proj4.js"></script>
    <style>
        .cesium-viewer .cesium-widget-credits {
            display: none !important;
        }

        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 300px;
        }

        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: ' ';
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }

        .ol-popup-closer:after {
            content: '✖';
        }

        .tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
        }
    </style>
</head>

<body style="
			margin: 0;
			overflow: hidden;
			background: #fff;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		">

<div id="map" style="width: 100%; height: 100%;"></div>

<div id="info" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="info-content"></div>
</div>

<script>
  try {
      // 4490坐标系需自定义
      proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs')
      var projection = new ol.proj.get('EPSG:4490')
      projection.setExtent([-180, -90, 180, 90])

      // 指定此Arcgis图层的分辨率
      var resolutions = [
          0.001373291015624828,
          0.000686645507812414,
          0.000343322753906207,
          0.0001716613769531035,
          0.00008583068847655175,
          0.000042915344238275876,
          0.000021457672119137938,
          0.000010728836059568969,
          0.0000053644180297844846,
          0.0000026822090148922423,
          0.0000013411045074461211
      ]
      var matrixIds = []
      for (var z = 0; z < resolutions.length; ++z) {
          matrixIds[z] = z
      }
      var url ='http://192.168.101.75:8889/api161/tilemap_1/rest/services/SZIMAGE/SZAVI201712_20ZW2K/ImageServer/tile/{z}/{y}/{x}'

      var view = new ol.View({
          projection: projection, //坐标系参数如果不设置，则默认为墨卡托
          resolutions: resolutions, //分辨率层级数组
          center: [114.14920825956825, 22.611386775967627],
          zoom: 1
      })

      var map = new ol.Map({
          layers: [
              new ol.layer.Tile({
                  source: new ol.source.XYZ({
                      url: url,
                      projection: projection,
                      tileGrid: new ol.tilegrid.WMTS({
                          origin: [-180, 90],
                          tileSize: 256,
                          resolutions: resolutions,
                          matrixIds: matrixIds
                      })
                  })
              })
          ],
          target: 'map',
          controls: ol.control.defaults({
              attributionOptions: {
                  collapsible: false
              }
          }),
          view: view
      })

  }catch (e) {
      console.log("报错了",e)
  }



    //tip:请求头的问题
    // var styleURL ='http://10.230.30.94:8090/iserver/services/map-mvt-szrv/restjsr/v1/vectortile/maps/sz_rv/style.json'
    var styleURL ='http://192.168.101.75/iserver/services/map-mvt-szrv/restjsr/v1/vectortile/maps/sz_rv/style.json'


    // 'http://10.230.30.94:8090/iserver/services/map-mvt-szhedgecenter/restjsr/v1/vectortile/maps/sz_hedge_center/style.json'
    var vectorLayer = null

    var format = new ol.format.MVT({
        featureClass: ol.Feature
    })
    var style = new ol.supermap.MapboxStyles({
        style: styleURL,
        map: map
    })
    style.on('styleloaded', function () {
        vectorLayer = new ol.layer.VectorTile({
            declutter: true,
            source: new ol.source.VectorTileSuperMapRest({
                style: styleURL,
                projection: projection,
                // source: 'China_4326',
                format: format
            }),
            style: style.getStyleFunction()
        })
        vectorLayer.setZIndex(2)
        map.addLayer(vectorLayer)
    })



    var overlay = new ol.Overlay({
        element: document.getElementById('info'),
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    })
    //绑定popup
    map.addOverlay(overlay)

    //添加pupop x按钮
    document.getElementById('popup-closer').onclick = function () {
        overlay.setPosition(undefined)
        this.blur()
        return false
    }


    //tip:点击地图
    map.on('click', mapOnClickListener)
    var content = document.getElementById('info-content')

    function mapOnClickListener(e) {
        overlay.setPosition(undefined)
        var selected = false
        map.forEachFeatureAtPixel(
            e.pixel,
            function (feature) {
                var props = feature.getProperties()
                console.log(props)
                content.innerHTML =
                    '编号：' +
                    props['obj_code'] +
                    '<br>' +
                    '名称：' +
                    props['obj_name'] +
                    '<br>' +
                    '类型：' +
                    props['elementtype'] +
                    '<br>' +
                    '图层名：' +
                    props['layer']
                overlay.setPosition(map.getCoordinateFromPixel(e.pixel))

                // overlay.setPosition(
                // 	feature.getGeometry().getCoordinates()
                // )
                selected = true
            }, {
                hitTolerance: 5
            }
        )
    }

    //tip：移动鼠标
    map.on('pointermove', pointermoveFunc)

    let highLightFeatures = []
    let highLightStyle = new ol.style.Style({
        image: new ol.style.Circle({
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 3
            })
        }),
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.1)'
        })
    })
    var source = new ol.source.Vector({
        wrapX: false
    })
    var highlightLayer = new ol.layer.Vector({
        source: source,
        style: highLightStyle
    })
    highlightLayer.setZIndex(99)
    map.addLayer(highlightLayer)

    function pointermoveFunc(event) {
        if (event.dragging) return
        map.forEachFeatureAtPixel(
            event.pixel,
            function (feature, featureLayer) {
                if (feature) {
                    // console.log(feature)
                    source.clear()
                    source.addFeature(feature)
                    // console.log(source.getFeatures()[0])
                    // feature.setStyle(highLightStyle)
                }
            }, {
                hitTolerance: 10
            }
        )
    }
</script>
</body>

</html>